<template>
	<view @tap="onTap" class="container">
		<image src="/static/icon/icon-location.png" class="locationIcon" v-if="showLeftIcon"></image>
		<text class="one-line-title posInfo" :style="{width, fontSize}">{{text}}</text>
		<image src="/static/icon/triangle.png" class="triIcon" v-if="showRightIcon"></image>
	</view>
</template>

<script>
	export default {
		// props: ["width", "showLeftIcon", "showRightIcon", "fontSize", "text"],
		props: {
			width: {
				type: String,
				default: '160rpx'
			},
			showLeftIcon: {
				type: Boolean,
				default: true
			},
			showRightIcon: {
				type: Boolean,
				default: true
			},
			fontSize: {
				type: String,
				default: '30rpx'
			},
			text: {
				type: String,
				default: '请输入需要的信息'
			}
		},
		data() {
			return {}
		},
		methods: {
			onTap() {
				this.$emit('hit')
			}
		}
	}
</script>

<style scoped>
	.container {
		/* #ifdef H5 || MP-WEIXIN */
		display: flex;
		/* #endif */
		flex-direction: row; 
		align-items: center;
	}
	.locationIcon {
		width: 26rpx; 
		min-width:26rpx; 
		height: 30rpx;
		margin-right: 10rpx;
	}
	.posInfo {
		/* font-size: 30rpx; */
		/* line-height: 30rpx; */
		/* margin-left: 10rpx; 
		margin-right: 10rpx; */
		/* background-color: pink; */
	}
	.triIcon {
		width: 16rpx; 
		min-width:16rpx; 
		height: 12rpx;
		margin-left: 10rpx;
	}
</style>
